<template>
  <div class="xuesheng" ref="xuesheng"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, ref, reactive, watch } from "vue";
import { getXueSheng } from "../request/index";
const option = reactive({
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["运动区", "宿舍区", "教学区", "吸烟区", "干饭区"],
    icon: "circle",
    textStyle: {
      color: "#FFF",
      fontSize: 13,
      padding: [2, 0, 0, 0],
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: [
      "0:00",
      "2:00",
      "6:00",
      "10:00",
      "12:00",
      "14:00",
      "16:00",
      "18:00",
      "20:00",
      "22:00",
      "24:00",
    ],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "运动区",
      type: "line",
      stack: "Total",
      data: [120, 132, 213, 2991, 101, 134, 90, 230, 90, 99, 312],
      showSymbol: false,
      smooth: true,
    },
    {
      name: "宿舍区",
      type: "line",
      stack: "Total",
      data: [220, 182, 191, 234, 290, 33, 230, 999, 310, 132, 101],
      showSymbol: false,
      smooth: true,
    },
    {
      name: "教学区",
      type: "line",
      stack: "Total",
      data: [150, 232, 201, 132, 101, 231, 99, 154, 190, 330, 410],
      showSymbol: false,
      smooth: true,
    },
    {
      name: "吸烟区",
      type: "line",
      stack: "Total",
      data: [132, 101, 320, 332, 301, 334, 390, 330, 320, 293, 2133],
      showSymbol: false,
      smooth: true,
    },
    {
      name: "干饭区",
      type: "line",
      stack: "Total",
      data: [820, 932, 901, 934, 1290, 132, 101, 20, 1290, 132, 233],
      showSymbol: false,
      smooth: true,
    },
  ],
});
const xuesheng = ref();
let myChart;
onMounted(() => {
  myChart = echarts.init(xuesheng.value);
  myChart.setOption(option);

  getXueSheng().then((res) => {
    option.legend.data= res.data.data.result[0].legend.data
    const newData = res.data.data.result[0].series;
    option.series = newData.map((item) => {
      return {
        data: item.data,
        name: item.name,
        stack: item.stack,
        showSymbol: false,
        smooth: true,
      };
    });
  });
});
window.addEventListener("resize", function () {
  myChart.resize();
});
watch(option, () => {
  myChart.setOption(option);
});
</script>

<style lang="scss">
.xuesheng {
  width: 100%;
  height: 90%;
}
</style>
